<template>
		<div>
				<el-row>
						<el-col :span="10">
								<el-input placeholder="添加职位" prefix-icon="el-icon-plus" style="width: 65%;margin-right: 1%"
																		v-model="positionForm.name" :min="3" maxlength="11" @keydown.enter.native="savePositions"></el-input>
								<el-button icon="el-icon-plus" style="width: 13%;margin-right: 1%" type="primary" @click="savePositions">添加
								</el-button>
								<el-button icon="el-icon-delete" style="width: 17%;" type="danger" @click="deleteBatchPosition"
																			:disabled="multipleSelection.length <= 0">批量删除
								</el-button>
						</el-col>
				</el-row>
				<el-row>
						<el-table
										border
										ref="multipleTable"
										:data="positions"
										tooltip-effect="dark"
										style="width: 100%"
										@selection-change="multipleSelect">
								<el-table-column
												align="center"
												type="selection"
												width="55">
								</el-table-column>
								<el-table-column
												align="center"
												prop="id"
												label="编号"
												width="120">
								</el-table-column>
								<el-table-column
												align="center"
												prop="name"
												label="职位名称"
												width="650">
								</el-table-column>
								<el-table-column align="center" prop="enabled" label="是否启用">
										<template v-slot="scope">
												<el-switch v-model="scope.row.enabled" @change="updatePositionByEnabled(scope.row)"></el-switch>
										</template>
								</el-table-column>
								<el-table-column
												align="center"
												prop="createdate"
												label="创建时间">
								</el-table-column>
								<el-table-column label="操作" align="center">
										<template slot-scope="scope">
												<el-button
																size="mini"
																@click="editHandler(scope.$index, scope.row)">编辑
												</el-button>
												<el-button
																size="mini"
																type="danger"
																@click="deletePosition(scope.$index, scope.row)">删除
												</el-button>
										</template>
								</el-table-column>
						</el-table>
				</el-row>
				<el-dialog
								title="修改职位名称"
								:visible.sync="dialogVisible"
								width="30%"
								:before-close="handleDialogClose">
						<el-row>
								<el-input label="职位名称" prefix-icon="el-icon-edit" v-model="editPositionForm.name"></el-input>
						</el-row>
						<span slot="footer" class="dialog-footer">
									<el-button @click="dialogVisible = false">取 消</el-button>
							 	<el-button type="primary" @click="updatePosition">确 定</el-button>
				  </span>
				</el-dialog>

		</div>
</template>

<script>
export default {
		name: "PositionManager",
		data() {
				return {
						positionForm: {
								name: ''
						},
						positions: [],
						multipleSelection: [],
						dialogVisible: false,
						editPositionForm: {}
				}
		},
		mounted() {
				this.init();
		},
		methods: {
				init() {
						this.listPositions()
				},
				// 获取职位列表
				listPositions() {
						this.$get("/system/basic/pos/listPositions").then(res => {
								const {data} = res;
								this.positions = [...data]
						})
				},
				// 保存职位
				savePositions() {
						if (!this.positionForm.name || this.positionForm.name.length < 0) {
								this.$message.error("职称长度必须大于三")
						} else {
								this.$post("/system/basic/pos/savePosition", this.positionForm)
												.then(res => {
														const {code} = res;
														if (code === 200) {
																this.listPositions()
																this.positionForm.name = ''
														}
												})
						}
				},
				// 编辑按钮事件
				editHandler(index, scope) {
						this.dialogVisible = true;
						this.editPositionForm = scope
				},
				// 发送修改职称请求
				updatePosition() {
						this.$put("/system/basic/pos/updatePosition", this.editPositionForm).then(res => {
								if (res !== undefined) {
										this.dialogVisible = false;
										this.listPositions();
								}
						})
				},
				updatePositionByEnabled(position) {
						this.editPositionForm = {...position}
						this.$confirm(`是否【${position.enabled ? '启用' : '禁用'}】${position.name}`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.updatePosition();
								this.editPositionForm = {}
						}).catch(error => {
								position.enabled = !position.enabled
								this.$message.info("取消修改")
						})
				},
				// 删除事件
				deletePosition(index, scope) {
						this.$confirm(`此操作将永久删除【${scope.name}】, 是否继续?`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.$del("/system/basic/pos/deletePosition", scope.id).then(res => {
										const {code} = res
										if (code === 200) {
												this.listPositions()
										}
								})
						}).catch(error => {
								this.$message.info("取消删除")
						})
				},

				// 多选事件
				multipleSelect(val) {
						this.multipleSelection = val.map(item => item.id)
				},

				// 批量删除事件
				deleteBatchPosition() {
						console.log(this.multipleSelection)
						this.$confirm(`此操作将永久删除【${this.multipleSelection.length}】条数据, 是否继续?`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.$del("/system/basic/pos/deleteBatchPosition", this.multipleSelection).then(res => {
										const {code} = res
										if (code === 200) {
												this.listPositions()
										}
								})
						}).catch(error => {
								this.$message.info("取消删除")
						})
				},

				handleDialogClose() {
						this.editPositionForm = {}
				}
		},

}
</script>

<style scoped>

</style>
